<!--#
layout("/layouts/platform.html"){
#-->
<style>
    .left_aside {
        width: 132px;
        height: 500px;
    }

    .left_tree {
        margin-top: 10px;
        margin-left: -5px;
    }

    /*当前分类标识颜色*/
    /*.left_tree .is-current .el-tree-node__content{*/
    /*    background-color: #F5F7FA;*/
    /*}*/

    .el-tree-node {
        padding-top: 7px;
    }

    .note {
        width: 100%;
        height: 320px;
    }

    .el-upload input[type=file] {
        display: none;
    }

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 128px;
        height: 128px;
        line-height: 128px;
        text-align: center;
    }

    .avatar {
        width: 128px;
        height: 128px;
        display: block;
    }
</style>
<div id="app" v-cloak>
    <el-row class="header navbar bg-white shadow">
        <!--新增按钮-->
        <div class="pull-right offscreen-right mt5">
            <el-button size="medium" @click="openAdd"><i class="ti-plus"></i>添加文件</el-button>
        </div>
    </el-row>
    <el-row class="el-table-container">
        <el-table
                :data="tableData"
                size="small"
                header-align="center"
                style="width: 100%">
            <el-table-column
                    label="类型"
                    prop="type"
                    header-align="center"
                    :show-overflow-tooltip="true"
                    align="center">
            </el-table-column>
            <el-table-column
                    label="版本"
                    prop="version"
                    header-align="center"
                    :show-overflow-tooltip="true"
                    align="center">
            </el-table-column>
            <!--文件名-->
            <el-table-column
                    label="文件名"
                    prop="fileName"
                    header-align="center"
                    :show-overflow-tooltip="true"
                    align="center">
            </el-table-column>
            <!--上传位置-->
            <el-table-column
                    label="上传位置"
                    prop="fileUploadPath"
                    header-align="center"
                    :show-overflow-tooltip="true"
                    align="center">
            </el-table-column>
            <!--文件路径-->
            <el-table-column
                    prop="filePath"
                    label="文件路径"
                    header-align="center"
                    align="center">
                <template slot-scope="scope">
                    <a href="{{scope.row.filePath}}" title="点击下载" style="color: #00c1de">{{scope.row.filePath}}</a>
                </template>
            </el-table-column>
            <!--创建时间-->
            <el-table-column
                    prop="ctAt"
                    label="创建时间"
                    header-align="center"
                    align="center"
                    width="120px">
                <template slot-scope="scope">
                    {{formatAt(scope.row.ctAt)}}
                </template>
            </el-table-column>
            <!--操作下拉菜单-->
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="120"
                    align="center">
                <template slot-scope="scope">
                    <el-dropdown @command="dropdownCommand">
                        <el-button size="mini">
                            <i class="ti-settings"></i>
                            <span class="ti-angle-down"></span>
                        </el-button>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item divided
                                              :command="{type:'del',id:scope.row.id, fileName:scope.row.fileName}">
                                删除
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </template>
            </el-table-column>
        </el-table>
    </el-row>
    <!--分页容器-->
    <el-row class="el-pagination-container">
        <div class="pull-left offscreen-right mt5">
            <el-pagination
                    @size-change="pageSizeChange"
                    @current-change="pageNumberChange"
                    :current-page="pageForm.pageNumber"
                    :page-sizes="[10, 20, 30, 50]"
                    :page-size="pageForm.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pageForm.totalCount">
            </el-pagination>
        </div>
    </el-row>
    <!--新增/修改按钮弹出的dialog-->
    <el-dialog
            title="新建APK文件"
            :visible.sync="addDialogVisible"
            :close-on-click-modal="false"
            width="40%">
        <el-row>
            <el-form :model="formData" ref="addForm" :rules="formRules" size="small" label-width="80px">
                <el-form-item prop="type" label="文件类型">
                    <el-select v-model="formData.type"
                               placeholder="请选择类型"
                    >
                        <el-option
                                v-for="item in types"
                                :key="item"
                                :label="item"
                                :value="item">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="version" label="版本">
                    <el-input v-model="formData.version"
                    >
                    </el-input>
                </el-form-item>
                <el-form-item prop="filePath" label="选择文件">
                    <el-upload
                            class="avatar-uploader"
                            tabindex="5"
                            action="${base}/open/file/upload/apkFile"
                            name="Filedata"
                            :show-file-list="false"
                            :before-upload="beforeFileUpload"
                            :on-success="handleFileSuccess"
                            :on-progress="uploadFileProcess">
                        <p v-if="formData.filePath">{{formData.filePath}}</p>
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        <el-progress v-if="fileFlag == true" type="circle" :percentage="fileUploadPercent"
                                     style="margin-top:30px;"></el-progress>
                    </el-upload>
                </el-form-item>
            </el-form>
        </el-row>
        <!--        确认/取消 提交修改按钮-->
        <el-row>
            <el-col :span="8">
                <span>&nbsp;</span>
            </el-col>
            <el-col :span="8">
                <el-button @click="addDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="doEdit">确 定</el-button>
            </el-col>
            <el-col :span="8">
                <span>&nbsp;</span>
            </el-col>
        </el-row>
    </el-dialog>
</div>
<script src="${base!}/assets/platform/js/sha256.js"></script>
<script>
    vue = new Vue({
        el: "#app",
        data: function () {
            return {
                searchDate: [],
                addDialogVisible: false,
                tableData: [],
                pageForm: {
                    pageNumber: 1,
                    pageSize: 10,
                    totalCount: 0,
                },
                formData: {
                    fileName: "",
                    fileUploadPath: "",
                    filePath: ""
                },
                formRules: {
                    filePath: [
                        {required: true, message: '请上传文件', trigger: 'blur'}
                    ],
                    type: [
                        {required: true, message: '请选择', trigger: 'blur'}
                    ]
                },
                fileType: ['apk'],
                fileFlag: false,
                fileUploadPercent: "",
                types:[
                    "IOS",
                    "Android"
                ]
            }
        },
        methods: {
            formatAt: function (val) {
                if (val > 0)
                    return moment(val * 1000).format("YYYY-MM-DD HH:mm");
                return "";
            },
            pageNumberChange: function (val) {//页码更新操作
                this.pageForm.pageNumber = val;
                this.pageData();
            },
            pageSizeChange: function (val) {//分页大小更新操作
                this.pageForm.pageSize = val;
                this.pageData();
            },
            pageData: function () {//加载分页数据
                let self = this;
                sublime.showLoadingbar();//显示loading
                $.post(base + "/platform/sys/apk/data", self.pageForm, function (data) {
                    sublime.closeLoadingbar();//关闭loading
                    if (data.code === 0) {
                        self.tableData = data.data.list;
                        self.pageForm.totalCount = data.data.totalCount;
                    } else {
                        self.$message({
                            message: data.msg,
                            type: 'error'
                        });
                    }
                }, "json");
            },
            doSearch: function () {
                this.pageForm.pageNumber = 1;
                this.pageData();
            },
            openAdd: function () {// 新建/修改User按钮逻辑
                let self = this;
                self.titlePopu = 0;
                this.addDialogVisible = true;
                if (this.$refs["addForm"]) {
                    this.$refs["addForm"].resetFields();
                }
                self.formData = {};
            },
            doEdit: function () { // 提交新增/修改
                let self = this;
                $.post(base + "/platform/sys/apk/add", self.formData, function (data) {
                    if (data.code === 0) {
                        self.$message({
                            message: data.msg,
                            type: 'success'
                        });
                        self.doSearch();
                        self.addDialogVisible = false;
                    } else {
                        self.$message({
                            message: data.msg,
                            type: 'error'
                        });
                    }
                }, "json");
            },
            dropdownCommand: function (command) {//监听下拉框事件
                let self = this;
                // 启用，禁用按钮
                if ("del" === command.type) {
                    self.$confirm('您确定要删除' + command.fileName + '文件？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning',
                        callback: function (a, b) {
                            if ("confirm" === a) {//确认后再执行
                                $.post(base + "/platform/sys/apk/del", {id: command.id}, function (data) {
                                    if (data.code === 0) {
                                        self.$message({
                                            message: data.msg,
                                            type: 'success'
                                        });
                                        self.doSearch();
                                    } else {
                                        self.$message({
                                            message: data.msg,
                                            type: 'error'
                                        });
                                    }
                                }, "json");
                            }
                        }
                    });
                }
            },
            beforeFileUpload: function (file) {
                let isLt1G = file.size / 1024 / 1024 < 1024;
                if (this.fileType.indexOf(file.name.substring(file.name.lastIndexOf(".") + 1, file.name.length)) < 0) {
                    this.$message.error('文件格式不符，仅可以上传' + this.fileType.join(','));
                    return false;
                }
                if (!isLt1G) {
                    this.$message.error('文件大小不能超过1个G');
                    return false;
                }
                return true;
            },
            handleFileSuccess(res, file) {                               //获取上传文件地址
                this.fileFlag = false;
                this.fileUploadPercent = 0;
                if (res.code === 0) {
                    this.formData.fileName = res.data.fileName;
                    this.formData.fileUploadPath = res.data.fileUploadPath;
                    this.formData.filePath = res.data.filePath;
                } else {
                    this.$message.error('文件上传失败，请重新上传！');
                }
            },
            uploadFileProcess(event, file, fileList) {
                this.fileFlag = true;
                this.fileUploadPercent = file.percentage.toFixed(0);
            }
        },
        created: function () {
            this.pageData();
        }
    });
</script>

<!--#
}
#-->